<template>
	<!-- 荣誉发布 -->
	<view class="bg-white container mt-2 h4">
		<u--form labelPosition="left" :model="honorFrom" ref="honorFrom" labelWidth="100" :rules="rules">
			<u-form-item label="荣誉名称" prop="title" borderBottom><u--input v-model="honorFrom.title" maxlength="50" border="none" placeholder="请编辑"></u--input></u-form-item>
			<u-form-item label="荣誉图片" prop="img_path">
				<view class="flex justify-end content-end">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="img" :maxCount="1" :max-size="600 * 1024" @oversize="oversize">
						<image src="/static/img2/my/honor.png" mode="widthFix" style="width:118rpx;height: 76rpx;"></image>
					</u-upload>
				</view>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<button class="b_btn bg_main text-white h4 text-center" @click="submit">确认发布</button>
	</view>
</template>

<script>
import { uploadImage } from '@/api/common.js';
import { honorAdd, honorEditInfo, honorEdit } from '@/api/my/publish.js';
export default {
	data() {
		return {
			honorFrom: {
				title: '',
				img_path: ''
			},
			rules: {
				title: [
					{
						type: 'string',
						required: true,
						message: '请编辑荣誉名称',
						trigger: ['blur', 'change']
					}
				],
				img_path: [
					{
						type: 'string',
						required: true,
						message: '请上传荣誉图片',
						trigger: ['blur', 'change']
					}
				]
			},
			fileList: [], //头像
			honorId: ''
		};
	},
	onLoad(option) {
		this.honorId = option.id;
		this.getInfo(option.id);
	},
	methods: {
		getInfo(val) {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				id: val
			};
			honorEditInfo(msg)
				.then(res => {
					// console.log(res);
					this.honorFrom = { ...this.honorFrom, ...res.vo };
					this.fileList.push({ url: res.vo.img_path });
				})
				.catch(err => {
					console.log('获取数据失败', err);
				});
		},
		deletePic(event) {
			this.fileList.splice(0, 1);
			this.honorFrom.img_path = '';
		},
		async afterRead(event) {
			uploadImage(event)
				.then(res => {
					if (res.code == 0) {
						this.fileList.push({ url: res.img });
						this.honorFrom.img_path = this.fileList[0].url;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('头像上传失败');
				});
		},
		submit() {
			this.$refs.honorFrom
				.validate()
				.then(res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						uid: uni.getStorageSync('userInfo').userId || '',
						...this.honorFrom
					};
					if (this.honorId) {
						// 编辑
						honorEdit({ ...msg, id: this.honorId })
							.then(res => {
								// console.log('编辑荣誉', res);
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									uni.navigateTo({
										url: '/subPages/my/company_main/index?tab=' + 1
									});
								}
							})
							.catch(err => {
								console.log('编辑荣誉失败', err);
							});
					} else {
						// 新增
						honorAdd(msg)
							.then(res => {
								// console.log(res);
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									uni.navigateTo({
										url: '/subPages/my/company_main/index?tab=' + 1
									});
								}
							})
							.catch(err => {
								console.log('新增荣誉失败', err);
							});
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.b_btn {
	width: 100%;
	height: 98rpx;
	line-height: 98rpx;
	position: fixed;
	bottom: 0;
	left: 0;
}
::v-deep .u-upload__button {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview__image {
	width: 118rpx !important;
	height: 76rpx !important;
	border-radius: 10rpx;
}
::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .u-upload__wrap {
	justify-content: flex-end;
}
</style>
